<script setup lang="ts">import Caiji from './components/Caiji.vue';
import Ciyun from './components/Ciyun.vue';
import Lishi from './components/Lishi.vue';
import Shijian from './components/Shijian.vue';
import Zhandian from './components/Zhandian.vue';
import Zhishi from './components/Zhishi.vue';
</script>

<template>
  <div class="wrapContent">
    <Zhandian class="item" />
    <Caiji class="item" />
    <Zhishi class="item" />
    <Lishi class="item" />
    <Ciyun class="item" />
    <Shijian class="item" />
  </div>
</template>

<style type="stylus" scoped>
.wrapContent {
  height: calc(100%);
  overflow-y: scroll;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 33.33%;
  }
}
.wrapContent::-webkit-scrollbar {
    width: 8px;
    height: 12px;
  }

  .wrapContent::-webkit-scrollbar-track {
    background: #0a1015;
    border-radius: 10px;
  }

  .wrapContent::-webkit-scrollbar-thumb {
    background: #0f212e;
    border-radius: 10px;
    border: none;
  }

  .wrapContent::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
</style>
